"use client";

import React, { useState, useEffect } from 'react';

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  className?: string;
}

const Pagination: React.FC<PaginationProps> = ({ 
  currentPage, 
  totalPages, 
  onPageChange,
  className = ""
}) => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    
    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);

  const getPageLinks = () => {
    const pageLinks: (number | string)[] = [];
    
    // 移动端显示更少的页码
    const maxPages = isMobile ? 5 : 7;
    
    if (totalPages <= maxPages) {
      for (let i = 1; i <= totalPages; i++) {
        pageLinks.push(i);
      }
    } else {
      if (currentPage <= 3) {
        for (let i = 1; i <= Math.min(4, totalPages); i++) pageLinks.push(i);
        if (totalPages > 4) {
          pageLinks.push('...');
          pageLinks.push(totalPages);
        }
      } else if (currentPage >= totalPages - 2) {
        pageLinks.push(1);
        pageLinks.push('...');
        for (let i = Math.max(totalPages - 3, 2); i <= totalPages; i++) pageLinks.push(i);
      } else {
        pageLinks.push(1);
        pageLinks.push('...');
        pageLinks.push(currentPage - 1);
        pageLinks.push(currentPage);
        pageLinks.push(currentPage + 1);
        pageLinks.push('...');
        pageLinks.push(totalPages);
      }
    }
    return pageLinks;
  };

  // 如果只有一页或没有数据，不显示分页
  if (totalPages <= 1) {
    return null;
  }

  return (
    <div className={`flex items-center justify-center py-4 px-2 ${className}`}>
      <div className="flex items-center">
        {/* 上一页按钮 */}
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="px-2 py-2 sm:px-4 text-xs sm:text-sm font-medium text-slate-500 bg-white border border-slate-200 rounded-md hover:bg-slate-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
          style={{ marginRight: '8px' }}
        >
          <span className="hidden sm:inline">上一页</span>
          <span className="sm:hidden">‹</span>
        </button>

        {/* 页码按钮 */}
        <div className="flex items-center" style={{ gap: '8px' }}>
          {getPageLinks().map((page, index) => {
            if (page === '...') {
              return (
                <span key={index} className="px-1 py-2 text-xs sm:text-sm font-medium text-slate-500">
                  ...
                </span>
              );
            }
            return (
              <button
                key={index}
                onClick={() => onPageChange(page as number)}
                className={`px-2 py-2 sm:px-3 text-xs sm:text-sm font-medium rounded-md transition-colors min-w-[32px] sm:min-w-[40px] ${
                  page === currentPage
                    ? '!text-white bg-[#1890ff] border border-[#1890ff]'
                    : 'text-slate-700 bg-white border border-slate-200 hover:bg-slate-100'
                }`}
              >
                {page}
              </button>
            );
          })}
        </div>

        {/* 下一页按钮 */}
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="px-2 py-2 sm:px-4 text-xs sm:text-sm font-medium text-slate-500 bg-white border border-slate-200 rounded-md hover:bg-slate-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
          style={{ marginLeft: '8px' }}
        >
          <span className="hidden sm:inline">下一页</span>
          <span className="sm:hidden">›</span>
        </button>
      </div>
    </div>
  );
};

export default Pagination; 